<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		*{
			margin:0;
			padding:0;
		}
		.chuantong{
			height:364px;
			width:204px;
			margin:100px auto;
			position: relative;
			border: 1px solid #000;
			overflow: hidden;
		}
		.chuantong ul{
			list-style: none;
			position: absolute;
			top:0;
			left:0;
			width:4000px;
		}
		.chuantong ul li{
			float: left;
			width:204px;
			height:364px;
			
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var imageAmount = $(".chuantong ul li").length;

			$(".chuantong ul li").clone().appendTo(".chuantong ul");

			var nowimg = 0;
			var $ul = $(".chuantong ul");
			var speed = 500;
			var intervalTime = 2000;

			function rightButFunc(){
				if(nowimg < imageAmount - 1){
					nowimg ++;
					$ul.animate({"left" : -204 * nowimg} , speed);
				}else{
					$ul.animate({"left" : -204 * imageAmount} , speed , function(){
						$(this).css("left",0);
					});
					nowimg = 0;
				}
			}

			var t = setInterval(rightButFunc , intervalTime);

			$(".chuantong").mouseenter(function(){
				clearInterval(t);
			})

			$(".chuantong").mouseleave(function(){
				clearInterval(t);
				t = setInterval(rightButFunc , intervalTime);
			})
		});
	</script>
	</head>
	<body>
		<div class="chuantong">
		<ul>
			<li><a href="#"><img src="img/theme-1.jpg" alt="" /></a></li>
			<li><a href="#"><img src="img/theme-2.jpg" alt="" /></a></li>
			<li><a href="#"><img src="img/theme-3.jpg" alt="" /></a></li>
		</ul>
	</div>
	</body>
</html>
